<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">

                <el-col :span="8">
                    <el-select v-model="searchForm.state" placeholder="状态" clearable>
                        <el-option  key="0" label="未读" value="0" />
                        <el-option  key="1" label="已读" value="1" />
                    </el-select>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="标题">
                        <el-input v-model="searchForm.title" placeholder="标题" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                        <el-popconfirm title="是否要全部已读？" confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="readAllMeg()">
                            <template #reference>
                                <el-button type="primary">全部已读</el-button>
                            </template>
                        </el-popconfirm>
                        <el-popconfirm title="是否要全部删除？" confirmButtonText="确认" cancelButtonText="取消"
                            @confirm="deleteAllMsg()">
                            <template #reference>
                                <el-button type="primary">全部删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table 
            stripe
            :data="tableData" 
            style="width: 100%" 
            v-loading="tableDataLoading"
            ref="multipleTableRef">

            <el-table-column label="标题" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.title }}
                </template>
            </el-table-column>

            <el-table-column label="内容" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.content }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center" width="200">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column label="状态" align="center" width="80">
                <template #default="{ row }">
                    {{ row.state == '0'?"未读":"已读" }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.state=='0'" type="primary" size="small" text @click="clickReadBtn(scope.row.id)">已读</el-button>
                    <el-button v-if="scope.row.state=='1'" type="primary" size="small" text @click="clickDeleteBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { dateFormatter } from '~/utils/common.js'
import {toast} from "~/composables/util"
import { getMessageList,readOne,deleteOne,readAll,deleteAll } from "~/api/messageApi";


const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)

const searchForm = reactive({
    //state 0：未读 1：已读
    state: "0",
    title: null,
    page: currentPage.value,
    size: limit.value,
})

// 生命周期
onMounted(() => {
    //加载表格数据
    getData()
})

//获取列表数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    getMessageList(searchForm)
    .then(res => {
        if(res && res.records){
            tableData.value = res.records
            total.value = res.total
        }else{
            tableData.value = []
            total.value = 0
        }
    })
    .finally(() => {
        tableDataLoading.value = false
    })
}

// 重置搜索框
const resetSearchForm = () => {
    //state 0：未读 1：已读
    searchForm.state = null
    searchForm.title = null
    getData(1)
}

//设置已读
const clickReadBtn = (id) => {
    readOne(id)
    .then(res => {
        toast("操作成功")
        //触发方法已读-1
        readCountChange(1)
        //重新加载数据
        getData()
    })
}

//删除消息
const clickDeleteBtn = (id) => {
    deleteOne(id)
    .then(res => {
        toast("操作成功")
        //重新加载数据
        getData()
    })
}

//全部已读
const readAllMeg = () => {
    readAll()
    .then(res => {
        toast("操作成功")
        //触发方法已读所有
        readCountChange(2)
        //重新加载数据
        resetSearchForm()
    })
}

//全部删除
const deleteAllMsg = () => {
    deleteAll()
    .then(res => {
        toast("操作成功")
        //触发方法已读所有
        readCountChange(2)
        //重新加载数据
        resetSearchForm()
    })
}


// 对外暴露方法
const emit = defineEmits([
    'readCountChange',
])

const readCountChange = (count) => {
    emit("readCountChange", count)
}

</script>
